<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
		<style type="text/css">
			#coursefenlei{
			width:1048px ;
			height: 40px;
			background-image: url(../img/righttop.gif);
			text-align: center;
			}
			#coursefenlei p{
			float: left;
			width: 100px;
			height: inherit;
			line-height: 3rem;
			color: #FFFFFF;
			background-color: #EB5409;
			font-size:14px ;
			}
			#coursefenlei li{
			list-style-type: none;
			float: left;
			width: 100px;
			line-height: 3rem;
			color: #000000;

			font-size:14px ;
			}		
			#coursefenlei li:hover{
			color: #EB5409;
			height: inherit;
			background-color:#FFFFFF;	
			}

			#imglist div{
			display:none;
			}
			#imglist{clear:both; overflow:hidden;width: 1046px; position: absolute;}
			#imglist li{width:160px; border:solid 1px #fff;height:193px;float:left; margin-bottom:10px; margin-top: 10px; padding: 1px; cursor:pointer;list-style-type: none;}
			#imglist li span{width:160px; height:146px;overflow: hidden; }
			#imglist li h2{text-align:center; line-height:25px; overflow: hidden;}

		</style>
		<script type="text/javascript">
			window.onload = firstCourse;
			//让第一类课程的6个热门课程显示出来，所有的课程得display默认都是none的
			function firstCourse() {
				var divid = imglist.getElementsByTagName("div");
				divid[0].style.display = "block";
			}
		</script>
		<script></script>
	</head>

	<body>
		<!--课程的类别-->
		<ul id="coursefenlei">
			<p>课程</p>
			<li id="1l">java</li>
			<li id="2l">c</li>
			<li id="3l">Python</li>
			<li id="4l">c++ </li>
		</ul>
		<!--所有课程-->
		<ul id="imglist">
			<!--每个课程的类的6个的热门课程都放在一个div中-->
			<div id="1d">
			
				<li>
					<span><img src="../../../../../../Documents/Tencent%20Files/371553474/FileRecv/courses/courses/WebContent/img/timg.png"/></span>
					<h2><a href="#">java</a></h2>
				</li>

				<li>
					<span><img src="../../../../../../Documents/Tencent%20Files/371553474/FileRecv/courses/courses/WebContent/img/timg.png" /></span>
					<h2><a href="#">java</a></h2>
				</li>

				<li>
					<span><img src="../../../../../../Documents/Tencent%20Files/371553474/FileRecv/courses/courses/WebContent/img/timg.png" /></span>
					<h2><a href="#">java</a></h2>
				</li>

				<li>
					<span><img src="../../../../../../Documents/Tencent%20Files/371553474/FileRecv/courses/courses/WebContent/img/timg.png" /></span>
					<h2><a href="#">java</a></h2>
				</li>

				<li>
					<span><img src="../../../../../../Documents/Tencent%20Files/371553474/FileRecv/courses/courses/WebContent/img/timg.png" /></span>
					<h2><a href="#">java</a></h2>
				</li>

				<li>
					<span><img src="../../../../../../Documents/Tencent%20Files/371553474/FileRecv/courses/courses/WebContent/img/timg.png" /></span>
					<h2><a href="#">java</a></h2>
				</li>
					<h2><a href="../../../../../../Documents/Tencent%20Files/371553474/FileRecv/courses/courses/WebContent/index.html">index</a></h2>
				<li>
					
				</li>
			</div>

			<div id="2d">
				<li>
					<span><img src="../../../../../../Documents/Tencent%20Files/371553474/FileRecv/courses/courses/WebContent/img/timg.png" /></span>
					<h2><a href="#">c</a></h2>
				</li>

				<li>
					<span><img src="../../../../../../Documents/Tencent%20Files/371553474/FileRecv/courses/courses/WebContent/img/timg.png" /></span>
					<h2><a href="#">c</a></h2>
				</li>

				<li>
					<span><img src="../../../../../../Documents/Tencent%20Files/371553474/FileRecv/courses/courses/WebContent/img/timg.png" /></span>
					<h2><a href="#">c</a></h2>
				</li>
				<li>
					<span><img src="../../../../../../Documents/Tencent%20Files/371553474/FileRecv/courses/courses/WebContent/img/timg.png" /></span>
					<h2><a href="#">c</a></h2>
				</li>
			</div>
			
		</ul>
		
	</body>

</html>